$(function() {
    $(".focus").on("mouseenter mouseleave", function() {
        $(".arrow-l, .arrow-r").toggle();
    });
    $(".focus ul li").each(function(i, n) {
        $(".circle").prepend("<li></li>");
    });
    var num = 0;
    var circle = 0;
    var flag = true;
    $(".focus ul").append($(".focus ul li").eq(0).clone());
    $(".circle li").on("click", function() {
        if (flag) {
            num = circle = $(this).index();
            flag = false;
            $(".focus ul").stop().animate({
                left: -$(".focus").width() * num
            }, 500, function() {
                flag = true;
            });
        }
        $(this).addClass("current").siblings().removeClass();
    });
    $(".circle li").eq(0).addClass("current");
    $(".arrow-r").on("click", function() {
        if (flag) {
            flag = false;
            if (num >= $(".focus ul li").length - 1) {
                num = 0;
                $(".focus ul").css({ left: -$(".focus").width() * num });
            }
            num++;
            $(".focus ul").stop().animate({
                left: -$(".focus").width() * num
            }, 500, function() {
                flag = true;
            });
            circle++;
            if (circle >= $(".circle li").length) {
                circle = 0;
            }
            $(".circle li").eq(circle).addClass("current").siblings().removeClass();
        }
    });
    $(".arrow-l").on("click", function() {
        if (flag) {
            flag = false;
            if (num <= 0) {
                num = $(".focus ul li").length - 1;
                $(".focus ul").css({ left: -$(".focus").width() * num });
            }
            num--;
            $(".focus ul").stop().animate({
                left: -$(".focus").width() * num
            }, 500, function() {
                flag = true;
            });
            circle--;
            if (circle < 0) {
                circle = $(".circle li").length - 1;
            }
            $(".circle li").eq(circle).addClass("current").siblings().removeClass();
        }
    });
    var times = setInterval(function() {
        $(".arrow-r").triggerHandler('click');
    }, 2000);

});